<template>
    <div class="user">
        <div class="search">
            <span>角色：</span>
            <el-select style="width: 200px" v-model="roleId " placeholder="请选择角色">
                <el-option
                v-for="item in roleList"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
                /> 
            </el-select>
            <el-input  v-model="name" placeholder="请输入姓名" style="width: 200px; margin-right: 20px;">
            </el-input>

            <!-- 性别下拉框 -->
            <el-select v-model="sex" placeholder="选择性别"  style="width: 150px;">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
            </el-select>

            <el-button style="margin-left: 10px;"type="success" size="small" @click="loadEmployees">查询</el-button>
            <el-button type="primary" size="small" @click="editRef.drawer=true" >添加</el-button>
        </div>
        <el-table size="small" :data="employees" width="98">
            <el-table-column   label="编号" width="180" type="index"/>               
            <el-table-column v-if="false" prop="id"  label="编号" width="100" />               
            <el-table-column  prop="username" label="用户名" width="100"  />
            <el-table-column prop="name" label="姓名" width="100" />
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="userAddress" label="住址" width="180" />
            <el-table-column prop="roleName" label="角色" width="180" />
            <el-table-column prop="sex" label="性别" width="100" >
                <template  #default="scope">
                <!-- 判断 sex 的值，1 显示 男，0 显示 女 -->
                <span>{{ scope.row.sex === 1 ? '男' : '女' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="entryTime" label="入职时间" width="180" />
                
             <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row.id)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                            删除
                    </el-button>
                    <el-button size="small" @click="handleDetail(scope.row.id)">
                            详情
                    </el-button>
                </template>
                
            </el-table-column>
        </el-table>
        <el-pagination 
            style="margin-top: 10px;" 
            small 
            background 
            layout="prev, pager, next" 
            :total="total"
            v-model:current-page="pageIndex"
            :default-page-size="7"
            @current-change="loadEmployees"/>
        <EditUser ref="editRef" @sync-list="loadEmployees"></EditUser>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref} from "vue";
import EditUser from '../../components/user/EditUser.vue'
import {$roleList} from '../../api/role.ts'
import {$delete, $employList,$findEmployeeById} from '../../api/admin.ts'
import {ElNotification, ElMessageBox} from 'element-plus'
//员工列表
let employees = ref([])
// const employees = ref<Employee[] | null>(null);  // 假设 Employee 是你的数据类型
//页码

let pageIndex = ref(1)
let total = ref(0)


let roleId = ref('')
let name = ref('')
let sex = ref('')
//加载员工列表
const loadEmployees = async()=>{
    let{data,count} = await $employList({
        roleId: roleId.value ,
        name: name.value ,
        sex: sex.value ,
        pageIndex:pageIndex.value,
        pageSize:7
    });   
    employees.value = data;
    
    total.value = count;
    
    
    // employees.value = ret.t
    // roles.value = data.t
}

//详情
const handleDetail = async(id:number) =>{
    let ret = await $findEmployeeById({id})
    if(ret.code === 4001){
        ElNotification({
            title: '失败！',
            message: '服务器异常，请联系管理员！',
            type: 'error',
        })
        return
    }
    console.log(ret.t);
    
    editRef.value.formData3 = ret.t
    editRef.value.drawer3 = true
}

// 编辑方法
const handleEdit = async (id:number) =>{
   let ret = await $findEmployeeById({id})
    if(ret.code === 4001){
        ElNotification({
            title: '失败！',
            message: '服务器异常，请联系管理员！',
            type: 'error',
        })
        return
    }
    
    editRef.value.formData2 = ret.t
    
    editRef.value.drawer2 = true
}
//删除方法
const handleDelete =(id:number)=>{
    ElMessageBox.confirm(
        '确定删除么？',
        '提示',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }   
    )
    .then(async()=>{
        let ret = await $delete({id})
    
        if(ret.code === 2001){
            ElNotification({
                title: '成功！',
                message: '恭喜你，删除成功！',
                type: 'success',
            })
            //重新加载列表
            loadEmployees()
        }else if(ret.code === 2002){
            ElNotification({
                title: '失败！',
                message: '删除失败，你无法删除你自己！',
                type: 'error',
            })
        }else{
            ElNotification({
                title: '失败！',
                message: '删除失败，请联系管理员！',
                type: 'error',
            })
        }
    })
    .catch(()=>{
        
    })
    
}

//角色列表
let roleList = ref([])

//加载角色列表
const loadRoleList = async()=>{
    roleList.value = await $roleList();
    
}

//定义编辑组件ref对象
let editRef = ref(null)

onMounted(()=>{
    loadRoleList()
    loadEmployees()
})
</script>

<style lang="scss" scoped>
.search{
    margin-bottom: 5px;
}
</style>